<!DOCTYPE html>
<html lang="zh" data-theme="dark">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mimi 秘密 - 密码管理</title>
    <script>
        // 预加载主题设置
        (function() {
            const savedTheme = localStorage.getItem('theme') || 'dark';
            document.documentElement.setAttribute('data-theme', savedTheme);
        })();
    </script>
    <link rel="stylesheet" href="./css/style.css">
    <link rel="stylesheet" href="./css/theme.css">
    <link rel="stylesheet" href="./css/passwords.css">
</head>
<body>
    <div class="container">
        <header class="header">
            <div class="header-left">
                <a href="dashboard.html" class="back-btn" id="backToDashboard">返回</a>
                <h1>密码管理</h1>
                <div class="password-count">
                    共 <span id="passwordCount">0</span> 个密码
                </div>
            </div>
            <div class="header-right">
                <button id="themeToggle" class="theme-toggle">
                    <span class="icon">🌓</span>
                    <span>主题</span>
                </button>
                <button id="addPasswordBtn" class="action-btn">添加密码</button>
                <button id="logoutBtn" class="action-btn">退出登录</button>
            </div>
        </header>

        <main class="main-content">
            <div class="search-bar">
                <input type="text" id="search-input" placeholder="搜索密码...">
            </div>

            <div id="domain-list" class="password-list">
                <!-- 密码列表将通过 JavaScript 动态生成 -->
            </div>
        </main>

        <!-- 添加密码模态框 -->
        <div id="add-password-modal" class="modal">
            <div class="modal-content">
                <span class="close">&times;</span>
                <h2>添加密码</h2>
                <form id="add-password-form">
                    <div class="form-group">
                        <label for="add-url">网站地址</label>
                        <input type="url" id="add-url" required placeholder="https://example.com">
                    </div>
                    <div class="form-group">
                        <label for="add-username">用户名/邮箱</label>
                        <input type="text" id="add-username" required placeholder="your@email.com">
                    </div>
                    <div class="form-group">
                        <label for="add-password">密码</label>
                        <div class="password-field">
                            <input type="password" id="add-password" required>
                            <button type="button" class="toggle-password" title="显示/隐藏密码">
                                <span class="icon">👁️</span>
                            </button>
                            <button type="button" class="generate-password" title="生成随机密码">
                                <span class="icon">🎲</span>
                            </button>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="add-note">备注</label>
                        <textarea id="add-note" placeholder="添加备注信息..."></textarea>
                    </div>
                    <div class="modal-actions">
                        <button type="button" class="cancel-btn" id="add-cancel-btn">
                            <span class="icon">✖️</span>
                            取消
                        </button>
                        <button type="submit" class="submit-btn">
                            <span class="icon">💾</span>
                            保存
                        </button>
                    </div>
                </form>
            </div>
        </div>

        <!-- 查看密码模态框 -->
        <div id="view-password-modal" class="modal">
            <div class="modal-content">
                <span class="close">&times;</span>
                <h2>查看密码</h2>
                <form>
                    <div class="form-group">
                        <label for="view-url">网站地址</label>
                        <input type="url" id="view-url" disabled>
                    </div>
                    <div class="form-group">
                        <label for="view-username">用户名/邮箱</label>
                        <input type="text" id="view-username" disabled>
                    </div>
                    <div class="form-group">
                        <label for="view-password">密码</label>
                        <div class="password-field">
                            <input type="password" id="view-password" disabled>
                            <button type="button" class="toggle-password" title="显示/隐藏密码">
                                <span class="icon">👁️</span>
                            </button>
                            <button type="button" class="copy-password" title="复制密码">
                                <span class="icon">📋</span>
                            </button>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="view-note">备注</label>
                        <textarea id="view-note" disabled></textarea>
                    </div>
                    <div class="modal-actions">
                        <button type="button" class="delete-btn" id="delete-password-btn">
                            <span class="icon">🗑️</span>
                            删除
                        </button>
                        <div class="right-actions">
                            <button type="button" class="cancel-btn" id="view-cancel-btn">
                                <span class="icon">✖️</span>
                                取消
                            </button>
                            <button type="button" class="edit-btn" id="edit-password-btn">
                                <span class="icon">✏️</span>
                                编辑
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        <!-- 编辑密码模态框 -->
        <div id="edit-password-modal" class="modal">
            <div class="modal-content">
                <span class="close">&times;</span>
                <h2>编辑密码</h2>
                <form id="edit-password-form">
                    <div class="form-group">
                        <label for="edit-url">网站地址</label>
                        <input type="url" id="edit-url" required>
                    </div>
                    <div class="form-group">
                        <label for="edit-username">用户名/邮箱</label>
                        <input type="text" id="edit-username" required>
                    </div>
                    <div class="form-group">
                        <label for="edit-password">密码</label>
                        <div class="password-field">
                            <input type="password" id="edit-password" required>
                            <button type="button" class="toggle-password" title="显示/隐藏密码">
                                <span class="icon">👁️</span>
                            </button>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="edit-note">备注</label>
                        <textarea id="edit-note"></textarea>
                    </div>
                    <div class="modal-actions">
                        <button type="button" class="cancel-btn" id="edit-cancel-btn">
                            <span class="icon">✖️</span>
                            取消
                        </button>
                        <button type="submit" class="submit-btn">
                            <span class="icon">💾</span>
                            保存
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <script type="module" src="./js/passwords_front.js"></script>
    <script>
        // 主题初始化和切换
        document.addEventListener('DOMContentLoaded', () => {
            const themeToggle = document.getElementById('themeToggle');
            const icon = themeToggle.querySelector('.icon');
            
            // 从 localStorage 加载主题
            const savedTheme = localStorage.getItem('theme') || 'dark';
            document.documentElement.setAttribute('data-theme', savedTheme);
            icon.textContent = savedTheme === 'dark' ? '🌓' : '🌞';
            
            // 主题切换
            themeToggle.addEventListener('click', () => {
                const currentTheme = document.documentElement.getAttribute('data-theme');
                const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
                
                document.documentElement.setAttribute('data-theme', newTheme);
                icon.textContent = newTheme === 'dark' ? '🌓' : '🌞';
                localStorage.setItem('theme', newTheme);
            });
        });
    </script>
</body>
</html>